import React, { useEffect, useState, useRef } from 'react';
import {
  View,
  TouchableWithoutFeedback,
  FlatList,
  Text,
  Image,
  Animated,
  PanResponder,
} from 'react-native';
import i18n from '../i18n';
import stylesXS from '../styles/xs';
import stylesMD from '../styles/md';
import stylesLG from '../styles/lg';
import dimesA5 from '../styles/size/a5';
import dimesA5X2 from '../styles/size/a5x2';
import dimesA6 from '../styles/size/nom';

import { DashView } from 'react-native-sticker-lib/src/view/DashView';

import { StickerGroupListView } from 'react-native-sticker-lib/src/view/StickerGroupListView';

const SideBar = ({
  appState,
  stickerGroups,
  add,
  onImportPress,
  onItemPress,
  stickerGroupId,
  screenHeight,
  screenWidth,
  scrollPosition,
}) => {
  console.log("SideBar scrollPosition:"+scrollPosition);
  const [borderItemId, setBorderItemId] = useState(stickerGroupId);
  let wd = Math.round(screenWidth);
  const styles =
    wd === 1024 || wd === 1365
      ? stylesLG
      : wd === 994 || wd === 1325
        ? stylesMD
        : stylesXS;
  const nom = wd === 1024 || wd === 1365
    ? dimesA5X2
    : wd === 994 || wd === 1325
      ? dimesA5
      : dimesA6;

  // 列表的Item高度
  const itemHeight = styles.borderWidth_4.borderWidth * 2 + styles.modalItemSty.height
    + styles.borderBottomSide.height;
  // 列表的内容高度
  const listContentHeight = itemHeight * stickerGroups.length;
  // 列表可见区域高度
  const visibleHeight = screenHeight - styles.titleHeight.height -
    nom.dp_px_112 * 2;
  // 固定的滑块高度
  const thumbHeight = nom.dp_px_80;
  // 滑块可以移动的最大距离
  const maxThumbY = visibleHeight - thumbHeight;

  // 列表最大滑动距离
  const maxListScrollOffset = listContentHeight - visibleHeight;
  console.log("SideBar listContentHeight:" + listContentHeight + "==" + visibleHeight);


  useEffect(() => {
    setBorderItemId(stickerGroupId);
  }, [stickerGroupId, stickerGroups, appState]);



  return (
    <View
      style={[
        {
          width:
            screenWidth > screenHeight
              ? styles.width_456.width
              : styles.width_432.width,
          height: screenHeight - styles.titleHeight.height,
        },
        styles.borderRight,
      ]}>
      <View
        style={{
          height:
            screenHeight -
            styles.titleHeight.height -
            nom.dp_px_112 * 2,
        }}>
        <StickerGroupListView
          style={{
            width:
              screenWidth > screenHeight
                ? styles.width_456.width
                : styles.width_432.width,
            height: visibleHeight,
          }}
          searchStr={i18n.t('btn.search')}
          searchIcon={{ uri: Image.resolveAssetSource(require('../../assets/ic_search.png')).uri }}
          itemDefaultIocn={{ uri: Image.resolveAssetSource(require('../../assets/ic_sticker.png')).uri }}
          dataList={stickerGroups}
          currentStickerGroupId={borderItemId + ""}
          scrollPosition={(scrollPosition + 1) * nom.dp_px_112 <= (visibleHeight - nom.dp_px_112) ? 0 : scrollPosition}
          itemClick={(event) => {
            console.log("StickerGroupListView itemClick", event.nativeEvent);
            if(event.nativeEvent.id === 'search') {
              console.log("StickerGroupListView itemClick search");
              onItemPress({ id: 'search' });
              setBorderItemId('search');
              return;
            }
            var item = stickerGroups.find(item => {
              var id = item.isDefault ? -item.id : item.id;
              return id + "" === event.nativeEvent.id
            });
            console.log("StickerGroupListView itemClick item", item);
            setBorderItemId(item.isDefault ? -item.id : item.id);
            onItemPress(item);
          }}
        />

      </View>
      <View
        style={[
          styles.borderTopWidth,
          styles.height_224,
          {
            position: 'absolute',
            bottom: 0,
            left: 0,
            backgroundColor: '#fff',
            width:
              screenWidth > screenHeight
                ? styles.width_456.width
                : styles.width_432.width,
          },
          styles.justAlign,
          styles.backButton,
          styles.borderRight,
        ]}>
        <TouchableWithoutFeedback
          underlayColor={'#f9f9f9'}
          activeOpacity={0.25}
          onPress={() => {
            add();
          }}>
          <View
            style={[
              styles.flexCenter,
              {
                width:
                  screenWidth > screenHeight
                    ? styles.width_360.width
                    : styles.width_336.width,
              },
              styles.modalItemSty,
              {
                borderBottomWidth:0
              }
            ]}>
            <Image
              style={[
                styles.checkBtnWH,
                {
                  resizeMode: 'contain',
                },
              ]}
              source={require('../../assets/ic_add.png')}
            />
            <Text
              style={[
                styles.fontSize_34,
                styles.marginLeft_16,
                {
                  width:
                    screenWidth > screenHeight
                      ? styles.width_290.width
                      : styles.width_270.width,
                  fontWeight: '400',
                  color: '#000',
                },
              ]}
              ellipsizeMode={'middle'}
              numberOfLines={1}>
              {i18n.t('btn.addColl')}
            </Text>
          </View>
        </TouchableWithoutFeedback>
        <DashView
          style={{
            height: nom.dp_px_2,
            width: screenWidth > screenHeight
              ? styles.width_360.width
              : styles.width_336.width,

          }}
          dashWidth={nom.dp_px_2}
          gapWidth={nom.dp_px_4}
        />
        <TouchableWithoutFeedback
          underlayColor={'#f9f9f9'}
          activeOpacity={0.25}
          onPress={() => {
            onImportPress();
          }}>
          <View
            style={[
              styles.flexCenter,
              styles.modalItemSty,
              {
                width:
                  screenWidth > screenHeight
                    ? styles.width_360.width
                    : styles.width_336.width,
                borderBottomWidth: 0,
              },
            ]}>
            <Image
              style={[
                styles.checkBtnWH,
                {
                  resizeMode: 'contain',
                },
              ]}
              source={require('../../assets/ic_frame.png')}
            />
            <Text
              style={[
                styles.fontSize_34,
                styles.marginLeft_16,
                {
                  width:
                    screenWidth > screenHeight
                      ? styles.width_290.width
                      : styles.width_270.width,
                  fontWeight: '400',
                  color: '#000',
                },
              ]}
              ellipsizeMode={'middle'}
              numberOfLines={1}>
              {i18n.t('btn.import')}
            </Text>
          </View>
        </TouchableWithoutFeedback>
      </View>
    </View>
  );
};

export default SideBar;
